import './AIStatistics.scss'
import { PieTemplate } from './AssetsCharts'

import { useState } from 'react'

import { Spin, Empty } from 'antd'
import { project } from '../../../../Common/Data'
import { useMount, useRequest } from 'ahooks'

import { FrontModalBox } from '../Modal'

import { Http } from '../../../../Common/Api'
const { imageUrl } = project[window.location.hostname]

export const AIStatisticsA01 = () => {
    const Data = [
        { uuid: 1, type: '低风险', value: 55, unit: '处' },
        { uuid: 2, type: '一般风险', value: 25, unit: '处' },
        { uuid: 3, type: '较大风险', value: 0, unit: '处' },
        { uuid: 4, type: '重大风险', value: 0, unit: '处' },
    ]

    const Color = ['rgb(111, 175, 255)', 'rgb(255, 234, 65)', 'rgb(255, 155, 65)', 'rgb(255, 92, 92)']

    return (
        <div className="AIStatisticsA01">
            <PieTemplate size={200} data={Data} color={Color} />
            <div className="list">
                {Data.map(({ uuid, type, value, unit }) => (
                    <div key={uuid}>
                        <div>{type}</div>
                        <div>
                            {value} <span>{unit}</span>{' '}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export const AIStatisticsA02 = () => {
    const [top, setTop] = useState([
        { uuid: 1, label: '已处理', value: 0, color: 'rgba(30, 255, 215, 1)', img: 'J0101.png' },
        { uuid: 2, label: '未处理', value: 0, color: 'rgba(255, 254, 178, 1)', img: 'J0102.png' },
    ])
    const [Data, setData] = useState([
        { uuid: 1, type: '未佩戴安全帽', value: 0 },
        { uuid: 2, type: '沥青拌合站预警', value: 0 },
        { uuid: 3, type: '水泥拌合站预警', value: 0 },
        { uuid: 4, type: '试验室预警', value: 0 },
    ])

    const [LabList, setLabList] = useState()

    // AllLabNum ： 试验室预警数
    // LabPositiveNum ： 试验室已处理数
    // asphaltMixingStationDataAllNum ： 沥青预警数
    // asphaltMixingStationDataPositiveNum ： 沥青已处理数
    // cementMixingStationDataAllNum ： 水泥预警数
    // cementMixingStationDataPositiveNum ： 水泥已处理数
    // faceSecurityHatAllNum ： 安全帽预警数
    // faceSecurityHatPositiveNum ： 安全帽已处理数

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const {
                allLabNum,
                labPositiveNum,
                asphaltMixingStationDataAllNum,
                asphaltMixingStationDataPositiveNum,
                cementMixingStationDataAllNum,
                cementMixingStationDataPositiveNum,
                faceSecurityHatAllNum,
                faceSecurityHatPositiveNum,
                list,
            } = res

            const A01 = allLabNum - labPositiveNum
            const A02 = asphaltMixingStationDataAllNum - asphaltMixingStationDataPositiveNum
            const A03 = cementMixingStationDataAllNum - cementMixingStationDataPositiveNum
            const A04 = faceSecurityHatAllNum - faceSecurityHatPositiveNum

            const B01 =
                labPositiveNum +
                asphaltMixingStationDataPositiveNum +
                cementMixingStationDataPositiveNum +
                faceSecurityHatPositiveNum
            const B02 = A01 + A02 + A03 + A04
            setData([
                { uuid: 1, type: '未佩戴安全帽预警', value: A04 },
                { uuid: 2, type: '沥青拌合站预警', value: A02 },
                { uuid: 3, type: '水泥拌合站预警', value: A03 },
                { uuid: 4, type: '试验室预警', value: A01 },
            ])
            setTop([
                { uuid: 1, label: '已处理', value: B01, color: 'rgba(30, 255, 215, 1)', img: 'J0101.png' },
                { uuid: 2, label: '未处理', value: B02, color: 'rgba(255, 254, 178, 1)', img: 'J0102.png' },
            ])
            setLabList(list)
        },
    })

    useMount(() => {
        runAsync({ url: 'getAIWarningStat' })
    })
    const [OptionsCall, setOptionsCall] = useState()
    const ModalClick = uuid => {
        const optionsList = [
            null,
            { type: 'TableList', data: { title: '沥青拌合站预警', type: 'AsphaltMixingStationDetail' } },
            { type: 'TableList', data: { title: '水泥拌合站预警', type: 'CementMixingStationExceededDatil' } },
            { type: 'TableTest', data: { title: '试验室数据预警', LabList, result: '1' } },
        ]
        optionsList[uuid - 1] && setOptionsCall(optionsList[uuid - 1])
    }
    return (
        <div className="AIStatisticsA02">
            <div className="top">
                {top.map(({ uuid, label, value, color, img }) => (
                    <div key={uuid} style={{ color }}>
                        <img src={imageUrl + img} alt="" />
                        <div>{value}</div>
                        <div>{label}</div>
                    </div>
                ))}
            </div>
            <div className="list">
                {Data.map(({ uuid, type, value }) => (
                    <div key={uuid} onClick={() => ModalClick(uuid)}>
                        <div>{type}</div>
                        <div>{value} </div>
                    </div>
                ))}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const AIStatisticsA03 = () => {
    const [Data, setData] = useState()

    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })
    useMount(() => {
        runAsync({ url: 'getFaceSecurityHats' })
    })

    return (
        <div className="AIStatisticsA03">
            {Data ? (
                Data.length !== 0 ? (
                    <>
                        <div className="list">
                            {Data.map(
                                ({
                                    uuid,
                                    tableName,
                                    createTime,
                                    organization,
                                    address,
                                    faceSecurithHatAttachments,
                                }) => (
                                    <div key={uuid}>
                                        <img src={faceSecurithHatAttachments[0].attachment.fileUrl} alt="" />
                                        <div>
                                            <div>预警原因 : {tableName}</div>
                                            <div>
                                                <div>{createTime}</div>
                                                <div>
                                                    {organization.tableName} - {address}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ),
                            )}
                        </div>
                        <div className="more">
                            <div>查看案例分析</div>
                        </div>
                    </>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
        </div>
    )
}
